<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <el-date-picker
                        v-model="searchForm.dateVlue"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button @click="getExcePersonList()">搜索</el-button>
            </el-form-item>

        </el-form>

        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                stripe
                @selection-change="handleSelectionChange">

            <el-table-column
                    prop="imsi"
                    label="国际用户识别码"
                    width="160px">
            </el-table-column>
            <el-table-column
                    prop="smsType"
                    label="运营商类型"
                    width="100px">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="80px">
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="手机号"
                    width="120px">
            </el-table-column>
            <el-table-column
                    prop="healthcodeState"
                    label="健康码状态"
                    width="100px">
                <template slot-scope="scope">
                    <el-tag size="small" v-if="scope.row.healthcodeState == 'G'" style="background-color: green" type="success">绿码</el-tag>
                    <el-tag size="small" v-if="scope.row.healthcodeState == 'R'" style="background-color: red" type="success">红码</el-tag>
                    <el-tag size="small" v-if="scope.row.healthcodeState == 'Y'" style="background-color: yellow" type="success">黄码</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="acidtestTime"
                    label="核酸检测时间"
                    width="120px">
            </el-table-column>
            <el-table-column
                    prop="acidtestResult"
                    label="核酸检测结果"
                    width="110px">
            </el-table-column>
            <el-table-column
                    prop="vaccination"
                    label="注射疫苗情况"
                    width="120px">
            </el-table-column>
            <el-table-column
                    prop="hodometer"
                    label="14天行程"
                    width="120px">
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 50, 100]"
                :current-page="searchForm.current"
                :page-size="searchForm.size"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "ExcePerson",
        data() {
            return {
                total: 0,
                size: 10,
                current: 1,
                tableData: [],
                searchForm:{
                    dateVlue:'',
                    size: 10,
                    current: 1,
                }
            }
        },
        created() {
            this.getExcePersonList()
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.searchForm.size = val
                this.getExcePersonList()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.searchForm.current = val
                this.getExcePersonList()
            },
            handleSelectionChange(val) {
                console.log("勾选")
                console.log(val)
            },
            getExcePersonList() {
                this.$axios.post("/unusual/person/list", this.searchForm)
                    .then(res => {
                        this.tableData = res.data.data.records
                        this.size = res.data.data.size
                        this.current = res.data.data.current
                        this.total = res.data.data.total
                    })
            },
        }
    }
</script>

<style scoped>
    .el-pagination {
        float: right;
        margin-top: 22px;
    }
</style>